<template>
  <div class="side-nav-first">
    <nav>
      <ul>
<!--        <li><router-link to="/"><i class="el-icon-s-home"></i>首页</router-link></li>-->
<!--        <li><router-link to="/goods/goodsWarehouse"><i class="el-icon-s-goods"></i>商品</router-link></li>-->
        <li><router-link to="/plan/planManage"><i class="el-icon-s-goods"></i>计划</router-link></li>
      </ul>
    </nav>
<!--    <nav class="other-nav">-->
<!--      <li><router-link to="/">应用</router-link></li>-->
<!--      <li><router-link to="/">设置</router-link></li>-->
<!--      <li><router-link to="/">帮助</router-link></li>-->
<!--      <li><router-link to="/">客服</router-link></li>-->
<!--    </nav>-->
  </div>
</template>

<script>
export default {
  name: 'SideNavFirst',
  computed: {
    activeIndex () {
      let matched = this.$route.matched[1]
      let routeName = matched && matched.name
      debugger
      switch (routeName) {
        case 'goods':
          return 1
        case 'member':
          return 1
        default:
          return 0
      }
    }
  },
  data () {
    return {}
  }
}
</script>

<style scoped lang="less">
  .side-nav-first {
    background: #3b404f;
    position: fixed;
    z-index: 99;
    height: 100%;
    width: var(--panel-padding);
    padding-top: 50px;
    top: 0;
    left: 0;
    /*box-shadow: 2px 0 4px rgba(0,0,0,.3);*/
    & nav {
      text-align: center;
      & ul {
        & li a {
          & i {margin-right: 4px;}
          border-top: 1px solid #4a4f5d;
          border-bottom: 1px solid #363b49;
          padding: 10px 0;
          color: #fff;
          display: block;
          font-size: 14px;
          &:hover, &.router-link-exact-active {
            background: var(--color-primary);
          }
        }
      }
    }
  }
  .other-nav {
    position: absolute;
    bottom: 20px;
    width: 100%;
    display: flex;
    flex-direction: column;
    & li {
      padding: 8px 0;
      & a {
        color: #fff;
        font-size: 12px;
        &:hover {
          text-decoration: underline;
          color: var(--color-primary);
        }
      }
    }
  }
</style>
